<template>
  <!-- <div class="content " v-infinite-scroll="load" style="overflow:auto"> -->
      <div class="content ">

    <div class="blog" v-for="(item, index) in blogList" :key="index">

      <div class="title">
        {{ item.title }}
      </div>
      <router-link  style="text-decoration: none" :to="{name:'blogInfo',params:{item:item}}">
      <div class="tag">
        <el-tag size="small" v-for="tag in item.tag" :key="tag.name">
          {{ tag.name }}
        </el-tag>
      </div>
      <div class="blog-content" v-html="item.noImgContent">
        {{ item.noImgContent }}
      </div>
      </router-link>
      <div class="footer">
        <el-row :gutter="20" justify="space-between">
          <el-col :span="6">
            <div class="grid-content bg-purple">创建时间:{{ item.createTime }}</div>
          </el-col>

          <el-col :span="6">
            <!-- <div class="grid-content bg-purple" v-if="item.isCollection">已收藏</div> -->
            <div class="grid-content bg-purple" @click="operation(item)">{{ item.isCollection }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">更新时间:{{ item.updateTime }}</div>
          </el-col>
        </el-row>
      </div>

    </div>

    <div class="page">
      <el-pagination :page-size="5" layout="prev, pager, next" @current-change="curChange" :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
export default {
  components: {

  },
  data() {
    return {
      blogList: [],
      total: 0,
      page: 0,
      size: 10,
      isCollec: "收藏"
    }
  },
  created() {
    this.getBlogTagVoPage(this.page, this.size);
  },
  methods: {
    getBlogTagVoPage(page, size) {
      this.$api.getBlogTagVoPage({
        page: page,
        size: size
      }).then(res => {
        if (res.code === 200) {
          this.blogList = [];
          this.blogList = res.data.records;
          this.total = res.data.total;
          // console.log(res.data.total)
          let currentUser = localStorage.getItem("userid")
          for (let i = 0; i < this.blogList.length; i++) {
            this.blogList[i].noImgContent=this.blogList[i].content;
            this.blogList[i].noImgContent =this.blogList[i].noImgContent.replace(/<\/?(img)[^>]*>/gi, '');
            if (this.blogList[i].userId === currentUser) {
              this.blogList[i].isCollection = "已收藏";
            } else {
              this.blogList[i].isCollection = "收藏";

            }
          }

        }

      });
      console.log(this.blogList)
    },
    curChange(curPage) {
      // console.log(curPage);
      this.getBlogTagVoPage(curPage, 5)

    },
    //收藏操作
    operation(item) {
      if (item.isCollection === "收藏") {
        let curUser = localStorage.getItem("userid")
        // console.log("curUser:" + curUser)
        this.$api.insertUserBlog({
          blogId: item.id,
          userId: curUser
        }).then(res => {
          if (res.code === 200) {
            this.getBlogTagVoPage(this.page, this.size);
            return;
          }
        });
      } else {
        let curUser = localStorage.getItem("userid")
        this.$api.deleteUserById({
          bid: item.id,
          uid: curUser,
        }).then(res => {
          if (res.code === 200) {
            this.getBlogTagVoPage(this.page, this.size);
          } else {
            this.$message({
              message: '失败',
              type: 'error'
            });
          }
        });
      }

    }
  }

};
</script>

<style scoped lang="scss">
.content {
  //height: 800px;
}

.blog {
  border-bottom: 1px solid rgba(0, 0, 0, 0.027);
  width: 95%;
  margin: auto;

  .title {
    font-size: 20px;
    font-weight: 600;
    margin-top: 20px;

  }

  .tag {
    margin-top: 10px;
  }

  .blog-content {
    width: 100%;
    height: 60px;
    padding-top: 5px;
    padding-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; // 在第几行显示
    -webkit-box-orient: vertical;
    margin-bottom: 10px;
    //background-color: #e5e9f2;
  }

  .footer {

    font-size: 12px;
    color: rgba(5, 48, 48, 0.199);
  }


}

.page {
  height: auto;
  margin-top: 20px;
  width: 500px;
  // background-color: black;
}
</style>
